<template>
    <div class="project-info" v-if="props.type == 'Date'">

        <a-avatar size="large"  :style="{backgroundColor:props.color}" :gap="2">
            <template #icon>
                <component :is="IconMap[props.icon]" />
            </template>
        </a-avatar>
        <div style="margin-left:10px;display: flex;flex-direction:column;align-items: center;">
            <span> {{ (props.message ? dayjs(props.message).format('YYYY-MM-DD') :
                '未设置') }}</span>
            <span style="font-size: 12px;color: #999999;margin-top: 3px;">{{ props.tips }}</span>
        </div>
    </div>
    <div class="project-info" v-else-if="props.type == 'Status'">

<a-avatar size="large" :style="{backgroundColor:IconColor[props.message]}" :gap="2">
    <template #icon>
        <component :is="IconMap[props.message]"  />
    </template>
</a-avatar>
<div style="margin-left:10px;display: flex;flex-direction:column;align-items: center;">
    <span v-if="props.message==0" :style="{color:IconColor[props.message]}">待领取</span>
    <span v-else-if="props.message==1" :style="{color:IconColor[props.message]}">进行中</span>
    <span v-else-if="props.message==2" :style="{color:IconColor[props.message]}">未批改</span>
    <span v-else-if="props.message==3" :style="{color:IconColor[props.message]}">已完成</span>
    <span v-else-if="props.message==4" :style="{color:IconColor[props.message]}">已超时</span>
    <span style="font-size: 12px;color: #999999;margin-top: 3px;">{{ props.tips }}</span>
</div>
</div>
    <div class="project-info" v-else>
        <a-avatar size="large" class="project-info-avatar" :gap="2">
            <span>{{ props.message }}</span>
        </a-avatar>

        <div class="project-info-message">
            <span>{{ props.message }}</span>
            <br>
            <span class="project-info-message-font">{{ props.tips }}</span>
        </div>
    </div>


</template>

<script lang="ts" setup>
import { CalendarOutlined, CarryOutOutlined, CheckCircleOutlined, ClockCircleOutlined, IssuesCloseOutlined, MinusCircleOutlined, WarningOutlined } from '@ant-design/icons-vue';
import dayjs from 'dayjs';
const props = defineProps({
    type: {
        type: String,
        default: null
    },
    icon: {
        type: String,
        default: null
    },
    message: {
        type: [String, Number],
        default: null
    },
    color:{
        type:String,
    },
    tips: {
        type: String,
        default: null
    }
})
const IconMap = {
    'CalendarOutlined': CalendarOutlined,
    'CarryOutOutlined': CarryOutOutlined,
    4:WarningOutlined,
    3:CheckCircleOutlined,
    2:IssuesCloseOutlined,
    1:ClockCircleOutlined,
    0:MinusCircleOutlined,
   
    
};
const IconColor = {
    4:'rgb(250, 136, 136)',
    3:'#52c41a',
    2:'rgb(246, 198, 89)',
    1:'#1677FF',
    0:''
}
</script>
<style scoped>
.project-info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    width: auto;
}

.project-info-avatar {
    background-color: #7265e6;
}

.project-info-message {
    margin-left: 10px;
}

.project-info-message-font {
    font-size: 14px;
    color: #6666;
}
</style>